<template>
  <div class="container assetInfo-form">
    <div id="printArea" ref="scrollDiv" style="flex: 1; height: 100%; padding: 0 0 70px 0" class="dark-top">
      <div style="text-align: center; font-size: 24px; font-weight: 700">固定资产卡片</div>
      <!-- 基本信息 -->
      <div class="c-box">
        <!-- 标题 -->
        <div style="display: flex; justify-content: flex-start; margin-bottom: 10px">
          <div style="font-size: 16px; font-weight: 500">基本信息</div>
        </div>
        <!-- 表单 -->
        <div style="display: flex; height: 100%">
          <div style="width: 70%; height: 100%" class="asset-detail-form">
            <el-descriptions
              label-class-name="my-label"
              content-class-name="my-content"
              :column="2"
              size="medium"
              border>
              <template v-for="item in formLabels">
                <el-descriptions-item v-if="!item.hidden" :key="item.field" :label="item.label">
                  <span v-for="(k, key) in formData" :key="key">
                    <span v-if="key == item.field">{{ k }}</span>
                  </span>
                </el-descriptions-item>
              </template>
            </el-descriptions>
          </div>
          <div style="flex: 1; display: flex; flex-direction: column; justify-content: flex-start">
            <div style="height: 1px">
              <!-- 图片信息 -->
            </div>
            <div v-if="!showImg" class="img-box">
              <img src="@/assets/images/kong@2x.png" alt="example" />
              <div style="color: rgba(0, 0, 0, 0.45); margin-top: 10px">暂无设备图片</div>
            </div>
            <div v-else class="img-box">
              <img :src="imageUrl" class="avatar" />
            </div>
          </div>
        </div>
      </div>
      <!-- 配置信息 -->
      <div class="c-box">
        <div style="display: flex; justify-content: flex-start; margin-bottom: 10px">
          <div style="font-size: 16px; font-weight: 500">配置信息</div>
        </div>
        <div>
          <div style="width: 70%" class="asset-detail-form">
            <el-descriptions
              label-class-name="my-label"
              content-class-name="my-content"
              :column="2"
              size="medium"
              border>
              <template v-for="item in configLabels">
                <el-descriptions-item v-if="!item.hidden" :key="item.field" :label="item.label">
                  <span v-for="(k, key) in formData" :key="key">
                    <span v-if="key == item.field">{{ k }}</span>
                  </span>
                </el-descriptions-item>
              </template>
            </el-descriptions>
          </div>
        </div>
      </div>

      <!-- 维保信息 -->
      <div class="c-box">
        <div style="font-size: 16px; font-weight: 500">
          <div style="display: flex; justify-content: flex-start; margin-bottom: 10px">
            <div style="font-size: 16px; font-weight: 500">维保信息</div>
          </div>
          <!-- 内容 -->
          <div>
            <div style="width: 70%" class="asset-detail-form wh-from">
              <el-descriptions
                label-class-name="my-label"
                content-class-name="my-content"
                :column="2"
                size="medium"
                border>
                <template v-for="item in proLabels">
                  <el-descriptions-item v-if="!item.hidden" :key="item.field" :label="item.label">
                    <span v-for="(k, key) in formData" :key="key">
                      <span v-if="key == item.field">{{ k }}</span>
                    </span>
                  </el-descriptions-item>
                </template>
              </el-descriptions>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getDetail } from '@/api/specialProject/asset'

export default {
  data() {
    return {
      loading: false,
      showMaintenance: true,
      showConfig: true,
      showImg: false,
      imageUrl: '',
      // 表单项配置
      formLabels: [
        {
          label: '设备名称',
          field: 'assetName',
          type: 'input',
          span: 12,
          maxlength: 20,
          hidden: false,
          position: false,
        },
        {
          label: '设备编号',
          field: 'assetCode',
          type: 'input',
          span: 12,
          maxlength: 50,
          hidden: false,
          disabled: true,
          placeHolder: '自动生成',
          position: false,
        },
        {
          label: '部署服务器',
          field: 'deploymentServer',
          type: 'input',
          span: 12,
          maxlength: 50,
          hidden: false,
          position: false,
        },
        {
          label: '设备IP',
          field: 'ip',
          type: 'input',
          span: 12,
          maxlength: 50,
          hidden: false,
          position: false,
        },
        {
          label: '设备MAC',
          field: 'mac',
          type: 'input',
          span: 12,
          maxlength: 50,
          hidden: false,
          position: false,
        },
        {
          label: '设备类别',
          field: 'assetCategory',
          type: 'slot',
          span: 12,
          hidden: true,
          position: false,
        },
        {
          label: '设备类型',
          field: 'assetType',
          type: 'cascader',
          list: 'deviceTypeList',
          span: 12,
          hidden: false,
          position: false,
        },
        {
          label: '设备密级',
          field: 'securityLevel',
          type: 'select',
          list: 'securityList',
          span: 12,
          disabled: true,
          hidden: false,
          position: false,
        },
        {
          label: '责任部门',
          field: 'assetDepartmentName',
          type: 'slot',
          hidden: false,
          position: false,
        },
        {
          label: '责任人',
          field: 'ownerName',
          type: 'slot',
          hidden: false,
          position: false,
        },
        {
          label: '使用状态',
          field: 'usageStatus',
          type: 'select',
          list: 'usageList',
          span: 12,
          hidden: false,
          position: false,
        },
        {
          label: '设备状态',
          field: 'deviceStatus',
          type: 'select',
          list: 'deviceList',
          span: 12,
          hidden: false,
          position: false,
        },
        {
          label: '存放区域',
          field: 'storageDistrictName',
          type: 'select',
          list: 'regionList',
          span: 12,
          hidden: false,
          position: false,
        },
        {
          label: '存放位置',
          field: 'storageLocation',
          type: 'slot',
          span: 12,
          maxlength: 20,
          hidden: false,
          position: false,
        },
        {
          label: '设备来源',
          field: 'assetSource',
          type: 'select',
          list: 'assetSourceList',
          span: 12,
          hidden: false,
          position: false,
        },

        {
          label: '是否为普秘设备',
          field: 'isStandardSecurityDevice',
          type: 'select',
          list: 'isStandardList',
          span: 12,
          hidden: false,
          position: false,
        },
        {
          label: '预计归还日期',
          field: 'expectedReturnTime',
          type: 'slot',
          span: 12,
          hidden: false,
          position: false,
        },
        {
          label: '刻录权限',
          field: 'burnPermission',
          type: 'select',
          list: 'burnList',
          span: 12,
          hidden: false,
          position: false,
        },
        {
          label: '使用类型',
          field: 'usageType',
          type: 'slot',
          span: 12,
          hidden: false,
          position: false,
        },
        {
          label: '接入交换机',
          field: 'exchange',
          type: 'input',
          span: 12,
          maxlength: 50,
          hidden: false,
          position: false,
        },
      ],
      // 配置信息
      configLabels: [
        {
          label: '厂商',
          field: 'manufacturer',
          type: 'input',
          span: 12,
          maxlength: 20,
          hidden: false,
        },
        {
          label: '品牌',
          field: 'brand',
          type: 'input',
          span: 12,
          maxlength: 20,
          hidden: false,
        },
        {
          label: '型号',
          field: 'model',
          type: 'input',
          span: 12,
          maxlength: 20,
          hidden: false,
        },
        {
          label: '序列号',
          field: 'assetSerialNumber',
          type: 'input',
          span: 12,
          maxlength: 20,
          hidden: false,
        },
        {
          label: 'CPU',
          field: 'cpu',
          type: 'input',
          span: 12,
          maxlength: 20,
          hidden: false,
        },
        {
          label: '内存容量',
          field: 'memoryCapacity',
          type: 'input',
          span: 12,
          maxlength: 20,
          hidden: false,
        },
        {
          label: '磁盘空间',
          field: 'diskSpace',
          type: 'input',
          span: 12,
          maxlength: 20,
          hidden: false,
        },
        {
          label: '操作系统',
          field: 'operatingSystem',
          type: 'input',
          span: 12,
          maxlength: 20,
          hidden: false,
        },
        {
          label: '操作系统版本',
          field: 'osVersion',
          type: 'input',
          span: 12,
          maxlength: 20,
          hidden: false,
        },
        {
          label: '安装时间',
          field: 'installTime',
          type: 'dateTime',
          format: 'yyyy-MM-dd HH:mm:ss',
          span: 12,
          hidden: false,
        },
        {
          label: '内置光驱类别',
          field: 'opticalDriveType',
          type: 'select',
          list: 'driveTypeList',
          span: 12,
          hidden: false,
        },
        {
          label: '内置光驱状态',
          field: 'opticalDriveStatus',
          type: 'select',
          list: 'driveStatusList',
          span: 12,
          hidden: false,
        },
        {
          label: '用途说明',
          field: 'usageDescription',
          type: 'input',
          span: 12,
          maxlength: 20,
          hidden: false,
        },
        {
          label: '磁盘序列号',
          field: 'diskSerialNumber',
          type: 'input',
          span: 12,
          maxlength: 20,
          hidden: false,
        },
      ],
      // 维保信息
      proLabels: [
        {
          label: '设备购置时间',
          field: 'purchaseTime',
          type: 'dateTime',
          format: 'yyyy-MM-dd HH:mm:ss',
          span: 12,
        },
        {
          label: '设备入网时间',
          field: 'networkEntryTime',
          type: 'dateTime',
          format: 'yyyy-MM-dd HH:mm:ss',
          span: 12,
        },
        {
          label: '过保日期',
          field: 'expirationOfWarrantyDate',
          type: 'dateTime',
          format: 'yyyy-MM-dd HH:mm:ss',
          span: 12,
        },
        {
          label: '设备启用日期',
          field: 'deviceStartDate',
          type: 'dateTime',
          format: 'yyyy-MM-dd HH:mm:ss',
          span: 12,
        },
        {
          label: '维保厂家名称',
          field: 'maintenanceManufacturerName',
          type: 'input',
          span: 12,
          maxlength: 20,
        },
        {
          label: '维保厂家电话',
          field: 'maintenanceManufacturerPhone',
          type: 'input',
          span: 12,
          maxlength: 20,
        },
      ],
      // 表格信息
      deviceData: [],
      tableData: [],
      formData: {},
      knowId: null,
      type: null, // 操作类型 0编辑 1审核

      title: '新增',
      queryKey: null,
      queryValue: null,
      queryId: null,
      showArr: ['deploymentServer'],
      configArr: [],
    }
  },
  async created() {
    this.knowId = this.$route.query?.id
    this.title = this.$route.query?.title
    this.queryValue = this.$route.query?.dictValue
    this.queryKey = this.$route.query?.dictKey
    this.queryId = this.$route.query?.dictId
    this.formData.assetCategory = this.queryKey

    if (this.queryValue === '网络设备' || this.queryValue === '安全保密产品' || this.queryValue === '外部设备') {
      this.showArr.push('burnPermission')
      this.configArr.push(
        'cpu',
        'memoryCapacity',
        'diskSpace',
        'operatingSystem',
        'osVersion',
        'installTime',
        'opticalDriveType',
        'opticalDriveStatus',
        'diskSerialNumber'
      )
    }
    if (this.queryValue === '移动存储介质') {
      this.showArr.push('burnPermission', 'ip', 'mac', 'exchange')
      this.configArr.push(
        'cpu',
        'diskSpace',
        'operatingSystem',
        'osVersion',
        'installTime',
        'opticalDriveType',
        'opticalDriveStatus',
        'diskSerialNumber'
      )
    }
    if (this.queryValue === '其他设备') {
      this.showMaintenance = false

      this.showArr.push(
        'burnPermission',
        'mac',
        'exchange',
        'expectedReturnTime',
        'usageType',
        'isStandardSecurityDevice'
      )
      this.configArr.push(
        'cpu',
        'diskSpace',
        'memoryCapacity',
        'operatingSystem',
        'osVersion',
        'installTime',
        'opticalDriveType',
        'opticalDriveStatus',
        'diskSerialNumber'
      )
    }
    if (this.queryValue === '软件系统') {
      this.showArr = []
      this.showArr.push(
        'burnPermission',
        'mac',
        'exchange',
        'expectedReturnTime',
        'usageType',
        'isStandardSecurityDevice',
        'storageLocation',
        'storageDistrictName',
        'assetSource'
      )
      this.configArr.push(
        'cpu',
        'diskSpace',
        'memoryCapacity',
        'operatingSystem',
        'osVersion',
        'installTime',
        'opticalDriveType',
        'opticalDriveStatus',
        'diskSerialNumber'
      )
    }
    if (this.queryValue === '无形资产') {
      this.showMaintenance = false

      this.showArr.push(
        'burnPermission',
        'mac',
        'exchange',
        'expectedReturnTime',
        'usageType',
        'isStandardSecurityDevice',
        'storageDistrictName',
        'assetSource'
      )
      this.configArr.push(
        'cpu',
        'diskSpace',
        'memoryCapacity',
        'operatingSystem',
        'osVersion',
        'installTime',
        'opticalDriveType',
        'opticalDriveStatus',
        'diskSerialNumber'
      )
    }

    // 遍历隐藏 不需要的属性
    for (var k of this.showArr) {
      var j = this.formLabels.findIndex((item) => item.field === k)
      if (j !== -1) {
        this.formLabels[j].hidden = true
      }
    }
    for (var y of this.configArr) {
      var h = this.configLabels.findIndex((item) => item.field === y)
      if (h !== -1) {
        this.configLabels[h].hidden = true
      }
    }
    this.knowId && (await this.getDetails())
  },
  methods: {
    // 详情
    getDetails() {
      getDetail({ id: this.knowId }).then((res) => {
        this.formData = res
        this.tableData = res.list
        this.assetsCode = res.assetCode
        if (res.picturePath) {
          this.showImg = true
          this.imageUrl = window.baseUrl.default + res.picturePath
        }
      })
    },
  },
}
</script>

  <style scoped  lang="scss">
.my-label {
  width: 150px;
  background: transparent !important;
  color: rgba(0, 0, 0, 0.85) !important;
}
.switch {
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-right: 20px;
}
#app.dark-theme {
  .table,
  .header-top,
  .header-bottom,
  .dark-top,
  .app-container {
    background: transparent !important;
  }
  .my-label {
    background: #122352 !important;
    color: #fff !important;
  }
  .my-content {
    background: #122352 !important;
    color: #fff !important;
  }
  .container {
    background: transparent !important;
  }
  footer {
    background: #0a183e !important;
  }

  .div-foot {
    background: transparent !important;
  }

  .c-box,
  .sp-flex {
    background: rgba(59, 139, 255, 0.1);
    color: #fff;
  }
  .el-input__inner {
    background: transparent !important;
  }
  .bottom-box {
    color: #fff;
    border: 0.0625rem solid #097597;
  }
  .box-one,
  .box-three-right {
    border-right: 0.0625rem solid #097597;
  }

  .box-his {
    background-color: transparent;
    .title-box {
      background-color: transparent;
      .icon {
        background: #d8d8d8;
      }
    }
  }
}
.dark-top {
  background-color: #eef0f5;
  overflow: auto;
}
.c-box {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}
.container {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #eef0f5;
  overflow: auto;
}

footer {
  position: fixed;
  bottom: 0;
  right: 20px;
  height: 70px;

  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  z-index: 99;
  .div-foot {
    padding: 20px;
    height: 70px;
    line-height: 70px;
    width: 100%;
    // width: calc(100% - 240px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #fff;
  }
}

.tags {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .item {
    margin-right: 20px;
    width: 240px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    cursor: pointer;
    &.active {
      background: #edf0fd;
      border: 1px solid rgba(75, 110, 239, 1);
    }
    img {
      width: 26px;
      margin-right: 10px;
      vertical-align: middle;
    }
    span {
      color: rgba(0, 0, 0, 0.85);
      font-weight: 600;
    }
  }
}
.sp-flex {
  align-items: stretch;
}
.left {
  display: flex;
  align-items: center;
  span {
    margin: 0 20px;
  }
  i {
    display: inline-block;
    height: 50%;
    width: 0;
    margin: 0 20px;
    background: #d8d8d8;
    border: 1px solid rgba(151, 151, 151, 1);
  }
}
.right {
  display: flex;
  align-items: center;
  .el-button {
    margin-left: 10px;
  }
}

.back {
  margin-bottom: 10px;
}
.img-box {
  // flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100px;
  img {
    width: 56px;
    height: 56px;
    margin: 0px auto;
  }
  > div {
    margin-top: 10px !important;
  }
}
.app-row {
  // flex: 1;
  // overflow: auto;
}

.box-his {
  background-color: #ffffff;
  padding: 20px;
  margin-bottom: 20px;
  .title-box {
    display: flex;
    width: 100%;
    background: #f5f7fe;
    border-left: 3px solid #4b6eef !important;
    margin-bottom: 20px;
    .icon {
      display: block;
      width: 5px;
      height: 5px;
      margin: 20px 0px;
      border-radius: 50%;
      background: #d8d8d8;
    }
  }
}
.times {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  .el-empty {
    width: 100%;
  }
}
::v-deep {
  // 上传图片样式
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff !important;
  }
  .avatar-uploader-icon {
    font-size: 50px;
    color: #8c939d;
    width: 300px;
    height: 300px;
    line-height: 300px;
    text-align: center;
  }
  .avatar {
    width: 300px !important;
    height: 300px !important;
    display: inline-block;
  }
  .targetTable {
    // margin-top: -18px;
  }
  // 文本框高度
  .el-input--medium,
  .el-input__inner {
    height: 36px;
    line-height: 36px;
  }
  .switch {
    .el-input__inner {
      height: 30px;
      line-height: 30px;
    }
  }
  // .el-form {
  //   flex: 1;
  //   overflow: auto;

  // }
  .el-form-item--medium,
  .el-form-item__content {
    line-height: 32px !important;
    height: 32px !important;
  }
  .wh-from {
    .el-form-item--medium,
    .el-form-item__content {
      line-height: 100% !important;
      height: 100% !important;
    }
  }

  // 面板箭头样式
  .el-collapse-item__arrow {
    margin-left: -23px;
    margin-bottom: 10px;
    color: #4b6eef;
  }
  .el-timeline {
    padding-left: 0px !important;
  }
  // 去掉折叠面板的边框线
  .el-collapse-item__wrap,
  .el-collapse-item__header {
    border-bottom: 0px solid #e6ebf5 !important;
  }
  .el-collapse-item__content {
    padding: 15px;
    padding-bottom: 0px;
  }
  .el-timeline-item {
    padding-bottom: 10px;
  }
}
.dark-theme {
  div,
  span,
  i {
    // color: #ffffff !important;
  }

  .box-top,
  .box-content,
  .box-content1 {
    background-color: transparent !important;
  }
  .app-row {
    color: #fff !important;
    background-color: transparent;
  }
}
</style>
  <style media="print">
@page {
  size: auto;
}
@media print {
  .img-box {
    flex: 1;
    height: 160px !important;
    border-radius: 4px;
    padding: 1rem;
    margin: 0 auto !important;
  }
  .img-box img,
  .img-box > div {
    margin: 0 auto !important;
    text-align: center;
  }
}
</style>

